<script setup lang="ts">
import {ref} from "vue";
import {useRoute} from "vue-router";
import router from "@/router";

const route=useRoute(); //获取路由信息
const type=ref(null);
const getValue=()=>{
  if (route.query.params){
    type.value=JSON.parse(route.query.params).type;
    // console.log(type.value)
    // console.log("注册页面接收："+type.value)
  }else{
    console.log("没有接收到params")
  }
}
getValue()
const registerSuccess=ref(false);
const click=()=>{
  registerSuccess.value=!registerSuccess.value
}
const data=ref({
  username: '',
  password: '',
  phone:'',
  email:'',
  type:type.value,
});
const enter=(r)=>{
  if (r){
    router.push({
      path:'/systemIndex',
      query:{
        params:JSON.stringify({
          data:data.value
        })
      }
    })
    alert('注册成功！进入系统！')

  }else {
    alert('系统错误!')
  }
}
const clickReturn=(r)=>{
  if (r){
    router.push({
      path:'/'
    })
  }else {
    alert('系统错误!')
  }
}
</script>

<template>
  <main>
  </main>
  <div class="contents">
    <div class="content">
      <form class="left" action="#" method="post">
        <div class="left-content">
          <label>用户名：<input type="text" placeholder="请输入用户名..." v-model="data.username"></label>
          <label>密码：<input type="password" placeholder="请输入密码..." v-model="data.password"></label>
          <label>手机号码：<input type="password" placeholder="请输入手机号码..." v-model="data.phone"></label>
          <label>邮箱：<input type="email" placeholder="请输入邮箱..." v-model="data.email"></label>
          <input type="button" @click="click" value="注册">
        </div>

      </form>
      <div class="right">
        <h2>鲜花交易中心</h2>
        <h2>全球最大鲜花交易中心</h2>
        <h2>欢迎您注册</h2>
        <RouterLink to="/">首页</RouterLink>
      </div>
    </div>
  </div>
  <div @click="click" v-show="registerSuccess" class="tip">
    <div @click.stop class="tip-content">
      <p>注册完成！点击进入!</p>
      <div class="buttons">
        <button class="enter" @click="enter">进入系统</button>
        <button class="enter" @click="clickReturn">返回首页</button>
      </div>
    </div>
  </div>
</template>
<style scoped>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
main {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/images/index2.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  float: left;
  filter:blur(10px); /*背景毛玻璃效果*/
}
.contents{
  position:absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  .content{
    width: 50%;
    height: 50%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 15px;
    display: flex;
    .left{
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .left-content{
        width: 80%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:20px;
        label{
          width: 100%;
          input{
            margin-top: 5px;
            width: 100%;
            outline: none;
            padding: 10px;
          }
        }
        >input{
          width: 100%;
          padding: 10px 20px;
          cursor: pointer;
        }
      }
    }
    .right{
      width: 50%;
      height: 100%;
      background-image: url("../assets/images/index2.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      border-radius: 0 15px 15px 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: black;
      font-weight: 200;
      h2:nth-child(1){
        font-size: 50px;
        font-weight: 200;
      }
      h2:nth-child(2){
        font-size: 20px;
        font-weight: 200;
      }
      h2:nth-child(3){
        font-size: 20px;
        font-weight: 200;
      }
      a{
        text-decoration: none;
        color: black;
        margin-top: 20px;
        padding: 5px 10px;
        border-radius: 5px;
        font-size: 18px;
        font-weight: 200;
        background-color: white;
        cursor: pointer;
      }
    }
  }
}
.tip{
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5);
  .tip-content{
    padding: 40px;
    background-color: white;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    .buttons{
      display: flex;
      gap: 30px;
    }
  }
}

</style>